// 根容器
import { effectWatch } from "./reactive/index.js"
import { mountElement, diff } from "./render/index.js"

export function createApp(rootComponent) {
    return {
        mount(rootContainer) {
            console.log(rootContainer, 'rootContainer');
            const context = rootComponent.setup()
            let isMounted = false

            let prevSubTree
            effectWatch(() => {


                if (!isMounted) {
                    // init  
                    isMounted = true
                    rootContainer.innerHTML = ``
                    const subTree = rootComponent.render(context)
                    // rootContainer.append(element)
                    console.log(subTree, 'subtree');
                    // 把虚拟dom转化为element
                    mountElement(subTree, rootContainer)
                    prevSubTree = subTree

                } else {
                    // update
                    const subTree = rootComponent.render(context)
                    diff(prevSubTree, subTree)
                    prevSubTree = subTree
                }

                // diff  newNode.oldNode
            })
        }
    }
}